<script setup>
import { ref, reactive } from 'vue'

const isActive = ref(true)
const hasError = ref(false)

const styleObject = reactive({
  color: 'red',
  fontSize: '30px'
})
</script>

<template>
    <div
    class="static"
    :class="{ 'active': isActive, 'text-danger': hasError }"
    >Class 绑定</div>
    <p>
        <button @click="isActive = !isActive">Toggle class</button>
        <button @click="hasError = !hasError">Toggle class</button>
    </p>
    <div :style="styleObject"> Style 绑定</div>
</template>

<style scoped>
.active {
    background-color: yellow;
}
.text-danger {
    color: red;
}
</style>